import React from 'react';
import {
  Box,
  Grid
} from '@mui/material';
import RocketIcon from '@mui/icons-material/Rocket';
import { TypeSectionScrollReveal } from 'components/elements/TypeSectionsScrollReveal';
import { HeroSection } from 'text/HeroSection';
import { LaunchSection } from 'text/LaunchSection';
import { FeaturesSection } from 'text/FeaturesSection';
import { ComponentsSection } from 'text/ComponentsSection';
import { LicenseSection } from 'text/LicenseSection';
import { TechStackSection } from 'text/TechStackSection';
import { 
  FeaturesHeaderSection,
  FeaturesIntroSection,
  APIFrontendSection,
  APIFeaturesSection,
  NPMPackagesSection,
  TelemetryFeaturesSection
} from 'text/FeaturesListSection';
import { SetupStepsSection } from 'text/SetupStepsSection';
import { CallToActionSection } from 'text/CallToActionSection';
import { 
  KickstartBenefits,
  LatestFeatures,
  ReactGraphs,
  RechartsAnalysis,
  NodeTracing,
  SharedNotifications,
  EnergizeSales,
  UptimeMonitoring,
  Support247
} from 'text/DevSubscribers';
import { useDarkMode } from 'contexts/DarkMode';
import VisitorCounter from 'components/ui/VisitorCounter';

// Import the style objects and color constants from the SubscriberTextStyles file
import { 
  iconSx,
  largeHeaderSx,
  smallHeaderSx,
  buttonSx,
  listItemSx,
  normalTextColor,
  contrastTextColor,
  normalHeaderColor,
  normalIconColor
} from 'text/SubscriberTextStyles';

const HomePage = () => {
  const { darkMode } = useDarkMode();
  
  return (
    <Box
      sx={{
        width: '100%',
        maxWidth: '1200px',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        inViewAmount={0.1} // This sets it to trigger when 10% is visible
        text={<HeroSection 
          text="We build Go / Node + React powered SaaS Templates"    
          icon={RocketIcon}
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />  
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<KickstartBenefits 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        backgroundColor="secondary.main"
        text={<LaunchSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, contrastTextColor)}
          largeHeaderSx={largeHeaderSx(darkMode, contrastTextColor)}
          smallHeaderSx={smallHeaderSx(darkMode, contrastTextColor)}
          buttonSx={buttonSx(darkMode, contrastTextColor)}
          listItemSx={listItemSx(darkMode, contrastTextColor)}
        />}
      />  
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<LatestFeatures 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        text={<FeaturesSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<ReactGraphs 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        text={<ComponentsSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<RechartsAnalysis 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        backgroundColor="secondary.main"
        text={<LicenseSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, contrastTextColor)}
          largeHeaderSx={largeHeaderSx(darkMode, contrastTextColor)}
          smallHeaderSx={smallHeaderSx(darkMode, contrastTextColor)}
          buttonSx={buttonSx(darkMode, contrastTextColor)}
          listItemSx={listItemSx(darkMode, contrastTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<NodeTracing 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        text={<TechStackSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<SharedNotifications 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      {/* Replace the FeaturesListSection with Grid container and individual sections */}
      <Box
        sx={{
          width: '100%',
          padding: 1,
        }}
      >
        <Grid container spacing={2}>
          {/* Header Section */}
          <TypeSectionScrollReveal
            direction="left"
            sequenceReveal={true}
            staggerDelay={0.15}
            text={<FeaturesHeaderSection 
              iconSx={iconSx(darkMode, normalIconColor)}
              largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
            />}
          />
          
          {/* Intro Section */}
          <TypeSectionScrollReveal
            direction="left"
            sequenceReveal={true}
            staggerDelay={0.15}
            text={<FeaturesIntroSection 
              listItemSx={listItemSx(darkMode, normalTextColor)}
            />}
          />
          
          {/* API and Frontend Features */}
          <TypeSectionScrollReveal
            direction="left"
            sequenceReveal={true}
            staggerDelay={0.05}
            text={<APIFrontendSection 
              largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
              listItemSx={listItemSx(darkMode, normalTextColor)}
            />}
          />
          
          {/* API Features and Routes */}
          <TypeSectionScrollReveal
            direction="right"
            sequenceReveal={true}
            staggerDelay={0.05}
            text={<APIFeaturesSection 
              largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
              listItemSx={listItemSx(darkMode, normalTextColor)}
            />}
          />
          
          {/* NPM Packages */}
          <TypeSectionScrollReveal
            direction="left"
            sequenceReveal={true}
            staggerDelay={0.05}
            text={<NPMPackagesSection 
              largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
              listItemSx={listItemSx(darkMode, normalTextColor)}
            />}
          />
          
          {/* Telemetry Features */}
          <TypeSectionScrollReveal
            direction="right"
            sequenceReveal={true}
            staggerDelay={0.05}
            text={<TelemetryFeaturesSection 
              largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
              listItemSx={listItemSx(darkMode, normalTextColor)}
            />}
          />
        </Grid>
      </Box>
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<EnergizeSales 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        backgroundColor="secondary.main"
        text={<SetupStepsSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, contrastTextColor)}
          largeHeaderSx={largeHeaderSx(darkMode, contrastTextColor)}
          smallHeaderSx={smallHeaderSx(darkMode, contrastTextColor)}
          buttonSx={buttonSx(darkMode, contrastTextColor)}
          listItemSx={listItemSx(darkMode, contrastTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<UptimeMonitoring 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="left"
        useInnerBox={true}
        backgroundColor="secondary.main"
        text={<CallToActionSection 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, contrastTextColor)}
          largeHeaderSx={largeHeaderSx(darkMode, contrastTextColor)}
          smallHeaderSx={smallHeaderSx(darkMode, contrastTextColor)}
          buttonSx={buttonSx(darkMode, contrastTextColor)}
          listItemSx={listItemSx(darkMode, contrastTextColor)}
        />}
      />
      
      <TypeSectionScrollReveal
        paddingY={0}
        paddingX={0}
        direction="right"
        useInnerBox={true}
        text={<Support247 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
      
      <VisitorCounter 
        display={true}
        height={125}
        useBackground={false}
        useBorder={false}
      />
    </Box>
  );
};

export default HomePage;